<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区团购</title>
    <script src="/static/vue.min.js"></script>
    <script src="/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" type="text/css" href="/static/lib-master/theme-chalk/index.css"/>
    <script src="/static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="msg">
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="mohu" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button type="primary" @click="mydd(),div3=true">砍价活动
                </el-button>
                <el-button type="primary" @click="zhibo(),live_divg = true">直播
                </el-button>
                <el-button type="primary" @click="myorder(),div2=true">我的订单
                </el-button>
                <el-button type="warning" @click="miaosha()">秒杀活动
                </el-button>
                <el-popover placement="top" width="160" v-model="visible">
                    <p>确定要退出登陆？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="visible = false,todl()">确定</el-button>
                    </div>
                    <el-button slot="reference">{{username}}</el-button>
                </el-popover>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="goodsId" header-align="center" align="center" label="商品id">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
                <template slot-scope="scope">
                    <span v-html="scope.row.goodsName"></span>
                </template>
            </el-table-column>
            <el-table-column prop="goodsBiaoti" header-align="center" align="center" label="商品标题">
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片" width="250px">
                <template slot-scope="scope">
                        <span @click="getesDataList(scope.row.goodsId),divg1 = true">
                            <img width="200px" :src="scope.row.goodsImg">
                        </span>
                </template>
            </el-table-column>
            <el-table-column prop="goodsInfomation" header-align="center" align="center" label="商品信息">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品价格">
            </el-table-column>
            <el-table-column prop="goodsKucun" header-align="center" align="center" label="商品库存">
            </el-table-column>
            <el-table-column prop="goodsStatus" header-align="center" align="center" label="商品状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.goodsStatus==1">
                        进行中
                    </el-tag>
                    <el-tag v-if="scope.row.goodsStatus==0">
                        已结束
                    </el-tag>
                    <el-tag v-if="scope.row.goodsStatus==2">
                        未开始
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                       :current-page="pageIndex" :page-sizes="[1, 2, 3, 5]" :page-size="pageSize" :total="totalPage"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>

    <el-dialog width="75%" :visible.sync="divg1">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form ref="form" :model="dataeslist" label-width="80px">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="图片">
                                <img width="100%" :src="dataeslist.goodsImg">
                            </el-form-item>
                            <el-form-item label="">
                                <span>{{dataeslist.goodsName}}</span>
                            </el-form-item>
                            <el-button type="primary" @click="yuanjia(dataeslist.goodsId)">原价购买</el-button>
                            <el-button v-if="pintuanPrice!= null" type="primary"
                                       @click="topintuan(dataeslist.goodsId)">发起拼团
                            </el-button>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-width="20px" label="">
                                <span>库存：{{dataeslist.goodsKucun}}</span>
                            </el-form-item>
                            <el-form-item label-width="20px" label="">
                                原价:<span style="font-size:25px;color: red;">￥{{dataeslist.goodsPrice}}</span>
                            </el-form-item>
                            <el-form-item v-if="pintuanPrice!= null" label-width="20px" label="">
                                拼团价:<span style="font-size:25px;color: red;">￥{{pintuanPrice}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
            </el-col>
            </el-button>
            </el-form>
            <el-col :span="12">
                <el-form ref="form" :model="topintuanlists" label-width="80px">
                    <el-form-item v-if="pintuanPrice!= null" label="订单号">
                        {{topintuanlists.orderId}}
                    </el-form-item>
                    <el-form-item v-if="pintuanPrice!= null" label="创建时间">
                        {{topintuanlists.createtime}}
                    </el-form-item>
                    <el-form-item v-if="pintuanPrice!= null" label="发起人">
                        {{topintuanlists.adminName}}
                    </el-form-item>
                    <el-form-item v-if="pintuanPrice!= null" label="成团人数">
                        还差{{chengtuanRenshu-1}}人
                    </el-form-item>
                    <el-button v-if="pintuanPrice!= null" type="primary" @click="canyu(topintuanlists.uuid)">参与拼团
                    </el-button>
                </el-form>
            </el-col>
        </el-row>
    </el-dialog>
    <el-dialog title="我的订单" :visible.sync="div2" width="70%">
        <el-table :data="getorderList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="id" header-align="center" align="center" label="">
            </el-table-column>
            <el-table-column prop="userName" header-align="center" align="center" label="用户人">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.orderStatus==1">支付成功</span>
                    <span v-if="scope.row.orderStatus==0">支付失败</span>
                </template>
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
            </el-table-column>
            <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
            </el-table-column>
            <el-table-column prop="payDate" header-align="center" align="center" label="支付时间">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.orderStatus==0"
                               @click="topay(scope.row.goodsId,scope.row.adminId,scope.row.id)">去支付
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="可砍价商品" :visible.sync="div3" width="70%">
        <el-table :data="datagraList"
                  style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column type="index" :index="this.indexStartNum" label="序号" align="center" width="60">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称" width="90">
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片" width="140">
                <template slot-scope="scope">
                    <img width="120" :src="scope.row.goodsImg"></img>
                </template>
            </el-table-column>
            <el-table-column prop="goodsDijia" width="100" header-align="center" align="center" label="砍价价格">
            </el-table-column>
            <el-table-column width="160" prop="startTime" header-align="center" align="center" label="开始时间">
            </el-table-column>
            n bc
            <el-table-column prop="jendTime" width="160" header-align="center" align="center" label="结束时间">
            </el-table-column>
            <el-table-column prop="huodongStatus" header-align="center" align="center" label="活动状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.huodongStatus==0">进行中</span>
                    <span v-if="scope.row.huodongStatus==1">已结束</span>
                    <span v-if="scope.row.huodongStatus==2">未开始</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.huodongStatus==0 &&  scope.row.buystatus==0"
                               @click="tokj(scope.row.barginId)">参与砍价
                    </el-button>
                    <el-button v-if="scope.row.huodongStatus==0 && scope.row.buystatus==1"
                               @click="mykj(scope.row.barginId)">我的砍价
                    </el-button>
                    <el-button v-if="scope.row.huodongStatus==0 && scope.row.buystatus==2"
                               @click="toorderpay(scope.row.barginId)">去支付
                    </el-button>
                    <span v-if="scope.row.buystatus==3">
                        <el-tag type="info">已完成</el-tag>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndexs"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSizes"
                :total="totalPages"
                layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </el-dialog>

    <el-dialog title="直播活动" :visible.sync="live_divg" width="70%">
        <el-table :data="dataLists" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
            <el-table-column type="index" :index="this.indexStartNum" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column prop="liveTittle" header-align="center" align="center" label="直播标题">
        </el-table-column>
        <el-table-column prop="goodsImg" header-align="center" align="center"  label="直播图片">
                <template slot-scope="scope">
                    <span @click = "toimgs(scope.row.liveId)">
                        <img  :src="scope.row.liveImg" width="150px"/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="username" header-align="center" align="center" label="主播姓名">
            </el-table-column>
            <el-table-column prop="countpelop" header-align="center" align="center" label="直播人数">
            </el-table-column>

        </el-table>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        methods: {
            toorderpay(barginId){
                console.log(barginId+"userid:"+this.userid)
                window.location.href = "http://localhost:88/api/community/web/gotokan?barginId=" + barginId + "&userid=" + this.userid + "";
            },
            miaosha(){
              location.href="http://localhost:88/api/seckil/seckill/tomiaosha?userId="+this.userid;
            },
            toimgs(liveId){
                location.href = "http://localhost:88/api/community/liveweb/toliveweb?liveId="+liveId+"";
            },
            getDataPage() {
                api
                    .getFeedBackItemPage({
                        params: {
                            params: {
                                pageNum: this.pageNum - 1,
                                pageSize: this.pageSize,
                                itemName: this.itemName,
                            },
                        },
                    })
                    .then((data) => {
                        this.feedBackItemList = data.data.content;
                        this.allDataTotal = data.data.total;
                        this.allPageSize = data.data.total / this.pageSize + 1;
                        this.indexStartNum = (this.pageNum - 1) * this.pageSize + 1;
                    })
                    .catch((err) => {
                        this.$message({
                            message: err.response.message,
                            type: "error",
                        });
                    });
            },
            zhibo() {
                axios.get("http://localhost:88/api/live/liveacticity/tolist").then(({data}) => {
                    console.log(data)
                    this.dataLists = data.data
                    console.log(this.dataLists)
                })
            },
            //我的 订单
            mykj(id) {
                location.href = "http://localhost:88/api/community/tolist/kprices?barinid=" + id + "&userId=" + this.userid + "";
            },
            //参与砍价
            tokj(id) {
                location.href = "http://localhost:88/api/community/tolist/kprice?barinId=" + id + "&userId=" + this.userid + "";
            },
            myorder() {
                if (this.userid == null) {
                    alert("未登录，请先登录")
                    location.href = "./login.html";
                } else {
                    axios.get("http://localhost:88/api/community/order/touserlist?userId=" + this.userid).then(({data}) => {
                        this.getorderList = data.data
                    })

                }
            },
            canyu(uuid) {
                console.log(this.topintuanlists)
                window.location.href = "http://localhost:88/api/community/web/takepart?goodsid=" + this.topintuanlists.goodsId + "&uuid=" + uuid + "&pintuanid=" + this.topintuanlists.pintuanid + "&userid=" + this.userid + "";
            },
            todl() {
                location.href = "http://localhost:88/api/community/tolist/tologin";
            },
            topintuanlist(pintuanid) {
                axios.get("http://localhost:88/api/community/pintuanorder/topintuanlist?goodsid=" + pintuanid + "").then(({data}) => {
                    if (data.data[0] != null) {
                        this.topintuanlists = data.data[0]
                    } else {
                        this.topintuanlists = null
                    }
                })
            },
            topinlist() {
                axios.get("http://localhost:88/api/community/pintuan/topinlist?pinid=" + this.goodsids).then(({data}) => {
                    console.log(data)
                    if (data.data[0] != null) {
                        this.pintuanPrice = data.data[0].pintuanPrice
                        this.chengtuanRenshu = data.data[0].chengtuanRenshu
                        this.pintuanid = data.data[0].pintuanId
                    } else {
                        this.pintuanPrice = null;
                        this.pintuanid = null;
                    }
                    this.topintuanlist(this.pintuanid);
                })
            },
            topay(goodsId, adminId, id) {

                window.location.href = "http://localhost:88/api/community/web/gotomai?goodsid=" + goodsId + "&userid=" + adminId + "&orderid=" + id + "";
            },
            mydd() {
                if (this.userid == null) {
                    alert("未登录，请先登录")
                    location.href = "http://localhost:88/api/community/tolist/tologin";
                } else {
                    axios.get("http://localhost:88/api/bargain/bargin/tolists").then(({data}) => {
                        this.datagraList = data.data
                    })
                }
            },
            yuanjia(id) {
                if (this.userid == null) {
                    alert("未登录，请先登录")
                    location.href = "http://localhost:88/api/community/tolist/tologin";
                } else {
                    window.location.href = "http://localhost:88/api/community/web/gotomai?goodsid=" + id + "&userid=" + this.userid + "&orderid=0";
                }
            },
            topintuan(id) {
                if (this.userid == null) {
                    alert("未登录，请先登录")
                    location.href = "http://localhost:88/api/community/tolist/tologin";
                } else {
                    window.location.href = "http://localhost:88/api/community/web/kaituan?goodsid=" + id + "&userid=" + this.userid + "&pintuanid=" + this.pintuanid + "";
                }
            },
            // 获取数据列表
            getesDataList(id) {
                this.goodsids = id;
                this.topinlist();
                axios.get("http://localhost:88/api/community/goods/toes?goodsId=" + id).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataeslist = data.data.list[0]
                    } else {
                        this.dataList = []
                    }
                    this.dataListLoading = false
                })
            },
            getDataList() {
                axios.get("http://localhost:88/api/community/goods/toes?mohu=" + this.mohu + "&page=" + this.pageIndex + "&size=" + this.pageSize + "").then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.list
                        this.totalPage = data.data.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            }
        },
        el: "#msg",
        data() {
            return {
                msg: "列表页面",
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 2,
                totalPage: 0,
                pageIndexs: 1,
                pageSizes: 2,
                totalPages: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                username: localStorage.getItem("username"),
                userid: localStorage.getItem("id"),
                token: localStorage.getItem("token"),
                mohu: "",
                divg1: false,
                dialogTableVisible: false,
                dataeslist: [],
                status: 0,
                div2: false,
                getorderList: [],
                goodsids: "",
                pintuanPrice: "",
                pintuanid: "",
                topintuanlists: "",
                visible: false,
                chengtuanRenshu: "",
                div3: false,
                datagraList: {},
                live_divg: false,
                gridData: [],
                dataLists: [],
                indexStartNum :1,

            }
        },
        created() {
            this.getDataList();
            this.zhibo();
        }
    })
</script>

</html>